<template>
	<view class="numbers">
		<view
			class="number"
			hover-class="touch"
			hover-stay-time="300"
			v-for="(number, index) in numbers"
			@tap="tap(number)"
			:key="index"
			:style="{ color: tapNumbers.indexOf(number) > -1 ? '#FF775B' : 'black' }"
		>
			{{ number }}
		</view>
	</view>
</template>

<script>
export default {
	props: ['answerTexts', 'stopTap'],
	data() {
		return {
			numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9],
			tapNumbers: []
		}
	},
	methods: {
		tap: function(index) {
			this.touchAudio()
			if (this.stopTap) return
			if (this.tapNumbers.length === this.answerTexts.length) return
			if (this.tapNumbers.indexOf(index) < 0) this.tapNumbers.push(index)
			if (this.tapNumbers.length === this.answerTexts.length) {
				this.$emit('numberEnd', this.tapNumbers.join('') === this.answerTexts.join(''))
			}
		}
	}
}
</script>

<style scoped lang="stylus">
.numbers
	position absolute
	width 100%
	height 75%
	left 0
	top 10%
	display flex
	flex-wrap wrap
	animation outIn 0.3s
	.number
		width 33.3%
		height 33.3%
		display flex
		justify-content center
		align-items center
		font-size 15vh
		font-family monospace
		font-weight 500
		transition all 0.3s
</style>
